<template>
    <div class="goods_box" @click="todetail(obj.goods_id)">
        <div class="goods_img_box">
            <!-- <img :src="obj.goods_img" alt=""> -->
            <img :src="obj.images[0].img_path" alt="">
        </div>
        <div class="more_info">
            <h4>{{obj.goods_name}}<span v-if="obj.type">---{{obj.type}}</span></h4>
            <div class="more_price">
                <p class="reality_price">￥{{obj.goods_reality_price}} </p>
                <p class="original_price">￥{{obj.goods_original_price}}</p>
            </div>
            <div class="more_sale">
                <p class="sale_num">已售卖{{obj.sold_num}}件</p>
            </div>
        </div>
    </div>
  
</template>

<script>
export default {
    props:["obj"],
    methods:{
        todetail(id){
            this.$router.push({path:"/tidedetail",query:{id:id}})
            // console.log(this.obj.goods_id)
        }
    }
}
</script>

<style scoped>
    .goods_box{
        width: 47%;
        background-color: #fefffe;
        border-radius: 0.06rem;
        overflow: hidden;
        margin-bottom: 0.1rem;
    }
    .goods_box .goods_img_box{
        width: 100%;
    }
    .goods_box .goods_img_box img{
        width: 100%;
        height: 1.74rem;
    }
    .goods_box .more_info{
        padding: 0 0.1rem;
    }
    .goods_box .more_info h4{
        color: #1b1b1b;
        line-height: 0.2rem;
        margin-bottom: 0.1rem;
    }
    .goods_box .more_info .more_price{
        display: flex;
        justify-content: flex-start;
        line-height: 0.26rem;
    }
    .goods_box .more_info .more_price .reality_price{
        color: #da5320;
    }
    .goods_box .more_info .more_price .original_price{
        text-decoration: line-through;
        color: #7f7f7f;
    }
    .goods_box .more_info .more_price .more_sale{
        display: flex;
        justify-content: space-between;
    }
    .goods_box .more_info .more_sale .sale_num{
        color: #7f7f7f;
        font-size: 0.1rem;
    }
</style>